<template>
     <el-row   class="header-detail">
        <el-col :span="4" class="cg">
            <h2>课程名:</h2>
        </el-col>
        <el-col :span="6"> <h2>{{ courseInfo.courseName }}</h2> </el-col>
         <el-col :span="14">
          <div style="float:right;">
             <el-button type="success" @click="addMemberReserve">添加会员预约</el-button> 
             <el-button type="primary" @click="exportReservationData">导出预约数据</el-button> 
             <el-button type="danger" @click="deleteCourse">删除课程</el-button> 
             <el-button type="info" @click="emit('update:isDetail', true)">返回</el-button> 
             </div>
        </el-col>
      </el-row>
    <div style="max-width: 600px; border-top: 1px solid #333;" class="header-detail" >
        <el-row class="mt4">
          <el-col :span="8">
            <h4>开始时间:</h4>
          </el-col>
          <el-col :span="12">
            <span>{{ courseInfo.startTime }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <h4>结束时间:</h4>
          </el-col>
          <el-col :span="12">
            <span>{{ courseInfo.endTime }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <h4>时长:</h4>
          </el-col>
          <el-col :span="12">
            <span>{{ courseInfo.duration }}分钟</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <h4>性别限制:</h4>
          </el-col>
          <el-col :span="12">
            <span>{{ courseInfo.limitSex }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <h4>年龄限制:</h4>
          </el-col>
          <el-col :span="12">
            <span>{{ courseInfo.limitAge<0?'无限制': courseInfo.limitAge }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <h4>支持会员卡:</h4>
          </el-col>
          <el-col :span="12">
            <span v-for=" item in courseInfo.supportCards "> {{ item}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <h4>上课老师:</h4>
          </el-col>
          <el-col :span="12">
            <span>{{ courseInfo.teacherName }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <h4>上课参数:</h4>
          </el-col>
          <el-col :span="12">
            <span>{{ courseInfo.timesCost }}/{{ courseInfo.classNumbers }}</span>
          </el-col>
        </el-row>
      </div>
   <el-divider/>
   
     <el-tabs type="border-card">
        <el-tab-pane label="已预约">
            <div class="div-form">
                <el-form   style="float:right">
                      <el-form-item label="查找">
                     <el-input v-model="search"/>
                     </el-form-item>
                </el-form>
                <el-table :data="filterTableData" style="width: 100%">
                   <el-table-column label="会员卡" prop="memberName" />
                   <el-table-column label="手机号" prop="phone" />
                   <el-table-column label="使用会员卡" prop="cardName" />
                   <el-table-column label="预约人数" prop="reserveNumbers" />
                   <el-table-column label="使用次数" prop="timesCost" />
                   <el-table-column label="操作时间" prop="operateTime" />
                   <el-table-column label="操作人" prop="operator" />
                   <el-table-column label="预约备注" prop="reserveNote" />
                   <el-table-column label="操作">
                   <template #default="scope">
                       <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                       取消预约
                       </el-button>
                   </template>
                   </el-table-column>
                 </el-table>
               </div>
        </el-tab-pane>
        <el-tab-pane label="预约记录">
             <div class="div-form">
                    <el-form   style="float:right">
                          <el-form-item label="查找">
                         <el-input v-model="search2"/>
                         </el-form-item>
                    </el-form>
                    <el-table :data="filterTableData2" style="width: 100%">
                       <el-table-column label="会员" prop="memberName" />
                       <el-table-column label="手机号" prop="phone" />
                       <el-table-column label="会员卡" prop="cardName" />
                       <el-table-column label="预约人数" prop="reserveNumbers" />
                       <el-table-column label="使用次数" prop="timesCost" />
                       <el-table-column label="操作时间" prop="operateTime"  width="180"/>
                       <el-table-column label="操作人" prop="operator" />
                       <el-table-column label="预约结果" prop="reserveNote" />
                     </el-table>
                   </div>
        </el-tab-pane>
        <el-tab-pane label="上课数据">
            <el-button  type="success"  style="margin-bottom: 20px;" @click="deductMoney">一键确认扣费</el-button>
             <el-table :data="goToClassData" style="width: 100%">
               <el-table-column label="会员" prop="memberName" />
               <el-table-column label="手机号" prop="memberPhone" />
               <el-table-column label="会员卡" prop="cardName" />
               <el-table-column label="性别" prop="memberSex" />
               <el-table-column label="课程消费次数(单人)" prop="timesCost"  width="150"/>
               <el-table-column label="停课人数" prop="reserveNums"  />
               <el-table-column label="操作时间" prop="operateTime"  width="180"/>
               <el-table-column label="状态"  >
                <template #default="scope">
                    <el-tag type="primary"  v-if="scope.row.checkStatus ===1">已确认</el-tag>
                    <el-tag type="warning"  v-else>未确认</el-tag>
                </template>
                 
               </el-table-column>
                <el-table-column label="操作">
                       <template #default="scope">
                           <el-button  v-if="scope.row.checkStatus===1" type="info"  disabled size="small" @click="cutMoney(scope.$index, scope.row)">
                           已确认
                           </el-button>
                           <el-button   v-else type="success" size="small" @click="cutMoney(scope.$index, scope.row)">
                           确认扣款
                           </el-button>
                       </template>
                       </el-table-column>
             </el-table>

       

        </el-tab-pane>
      </el-tabs>
 <!-- 确认扣费的抽屉 -->
   <el-drawer v-model="chargeDrawer" title="扣费" direction="rtl" size="50%">
   <template #header>
        <h2>扣费</h2>
    </template>
   <el-form :model="chargeForm" style="margin-left: 20px; max-width: 600px;" label-width="auto" >
     <el-form-item label="扣除次数" >
       <el-input-number
               v-model="chargeForm.cardCountChange"
               :min="1"
               controls-position="right"
               class="w100"
           />
      </el-form-item>
     <el-form-item label="应扣金额" >
       <el-input-number
               v-model="chargeForm.amountOfConsumption"
               :min="1"
               controls-position="right"
               class="w100"
           />
      </el-form-item>
     <el-form-item label="扣除有效期" >
       <el-input-number
               v-model="chargeForm.cardDayChange"
               :min="1"
               controls-position="right"
               class="w100"
           />
      </el-form-item>

    <el-form-item label="备注">
       <el-input v-model="chargeForm.note" type="textarea"  placeholder="备注"/>
      </el-form-item> 
   </el-form>
   <el-form-item >
               <el-button @click="chargeDrawer = false">关闭</el-button>
            <el-button type="primary" @click="saveCharge">保存</el-button>
          </el-form-item>
</el-drawer>

      <!-- 添加会预约的抽屉 -->

  <el-drawer v-model="addDrawer" title="添加会员预约" direction="rtl" size="50%">
   <template #header>
        <h2>添加会员预约</h2>
    </template>
    <div class="demo-drawer__content"  >
      <el-form :model="reserveForm" style="margin-left: 20px; max-width: 600px;" label-width="auto" >
         <el-form-item label="选择会员" >
           <el-select v-model="reserveForm.memberId"
               placeholder="-请输入手机号码或名字-"
               filterable
               remote
               reserve-keyword
               :remote-method="remoteMethod"
               :loading="loading" 
               @change="selectById"       
               >
                   <template #header>
                       <el-row >
                           <el-col :span="3"><h3>id()</h3></el-col>
                           <el-col :span="7"><h3>会员名</h3></el-col>
                           <el-col :span="7"><h3>性别</h3></el-col>
                           <el-col :span="7"><h3>手机号</h3></el-col>
                       </el-row>
                   </template>
                  <el-option
                   v-for="item in members"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id"
                   >
                   <el-row>
                       <el-col :span="3"><span>{{ item.id }}</span></el-col>
                       <el-col :span="7"><span>{{ item.name }}</span></el-col>
                       <el-col :span="7"><span >{{ item.sex }}</span></el-col>
                       <el-col :span="7"><span >{{ item.phone }}</span></el-col>
                   </el-row>
                   </el-option>
                    <template #loading>
                       <svg class="circular" viewBox="0 0 50 50">
                           <circle class="path" cx="25" cy="25" r="20" fill="none" />
                       </svg>
                   </template>
                 </el-select>
              </el-form-item>
         <el-form-item label="可用会员卡" >
           <el-select v-model="reserveForm.cardId"
            placeholder="-请选择-"
            filterable    
            >
              <el-option
               v-for="item in cards"
               :key="item.id"
               :label="item.name"
               :value="item.id"
               >
               </el-option>
             </el-select>
          </el-form-item>
          <el-form-item >
            <template #label>
              <span>该会员的该会员卡</span>
            </template>
            <span style="color:red;margin-right: 30px;">剩余0次</span><span>每节课收取2次</span>
          </el-form-item>     
          <el-form-item label="预约人数">
             <el-input-number
                v-model="reserveForm.reserveNums"
                :min="1"
                controls-position="right"
                style="width:50%"
            />
          </el-form-item>     
          <el-form-item label="备注">
          <el-input v-model="reserveForm.note" type="textarea"  placeholder="备注"/>
          </el-form-item>     
        <el-form-item >
             <el-button @click="addDrawer = false">关闭</el-button>
          <el-button type="primary"  @click="saveReserve">确定</el-button>
        </el-form-item>
      </el-form>
      
    </div>
  </el-drawer>
</template>

<script setup>
import {ref,reactive,toRefs,computed,h, markRaw }  from 'vue'
import {  ElMessage, ElMessageBox  } from 'element-plus'
import { Warning } from '@element-plus/icons-vue'
import {getCourseDetail,getClassRecord,getRecordList,getReserveRecord, toSearchAll,toSearchByMemberId }  from  '@/api/course'
const props = defineProps(['courseId', 'isDetail'])
const emit = defineEmits(['update:isDetail'])
const {courseId} =toRefs(props)
console.log(courseId.value," 课程id1111")
//todo 根据课程id查找课程的详细信息
const courseInfo = ref({})
getCourseDetail(courseId.value).then(res=>{
    // console.log(res,'....')
    courseInfo.value= res.data.data
    // console.log('courseInfo',courseInfo.value)
})

//已预约数据
const search = ref('')
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)
//取消已预约
const handleEdit = (index, row) => {
    console.log(index, row)
}

//  todo调用接口获取数据
const tableData = [
    {
        memberName: '小白',
        phone: '13612345678',
        cardName:'金卡',
        reserveNumbers: 10,
        timesCost:2,
        operateTime:'2024-07-11',
        operator:'王老师',
        reserveNote:'预约',
        status:'已预约' 
    },
    {
        memberName: '小何',
        phone: '13612345669',
        cardName:'金卡',
        reserveNumbers: 8,
        timesCost:2,
        operateTime:'2024-07-11',
        operator:'张老师',
        reserveNote:'预约' ,
         status: '已预约'
    },
   
]

//预约记录 
const reserveRecordData = ref([])
//todo
getReserveRecord().then(res => {
  reserveRecordData.value = res.data.data
})
const search2 = ref('')
//todo 
const filterTableData2 = computed(() =>
  reserveRecordData.value.filter(
    (data) =>
      !search2.value ||
      data.memberName.toLowerCase().includes(search2.value.toLowerCase())
  )
)


//上课数据  todo调用接口获取数据
const goToClassData=ref([])
const chargeForm = reactive({
  cardCountChange:1,//扣费次数
  amountOfConsumption:500,//应扣金额
  cardDayChange:1,//扣除有效期
  note:'',//备注
})
getClassRecord().then(res=>{
  goToClassData.value = res.data.data
})

//确认扣款
const chargeDrawer = ref(false)
const cutMoney=()=>{
    //确认扣款是 表单 。。。。
    chargeDrawer.value = true
}

//保存扣费
const  saveCharge=()=>{
   ElMessageBox.confirm('', '提示', {
    message: h('p', null, [
      h('h2', { style: 'margin-bottom:10px;text-align:center' }, '你确定要确认扣吗吗?'),
      h('span', { style: 'color: teal;text-align:center' }, '注意:一旦扣费成功,将无法取消'),
    ]),
    confirmButtonText: '确认',
    cancelButtonText: 'Cancel',
    center: true,
    type: 'warning',
  }).then((action) => {
    //todo 调用后台修改数据


    ElMessage({
      type: 'success',
      message: `扣款成功`,
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消扣款',
    })
  })


}

//一键扣款
const deductMoney=()=>{
    ElMessageBox.confirm('', '提示', {
    message: h('p', null, [
      h('h2', { style: 'margin-bottom:10px;text-align:center' }, '你确定要一键确认已上课吗?'),
      h('span', { style: 'color: teal;text-align:center' }, '注意:一键确认操作不可逆'),
    ]),
    confirmButtonText: '一键确认',
    cancelButtonText: 'Cancel',
    center: true,
    type: 'warning',
  }).then((action) => {
    //todo 调用后台修改数据


    ElMessage({
      type: 'success',
      message: `一键扣款成功`,
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消一键扣款',
    })
  })  


}

//导出预约数据
const exportReservationData=()=>{
      ElMessageBox.confirm(
    '你确定要导出预约数据吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      //todo 调用后端接口


      ElMessage({
        type: 'success',
        message: '导出完成',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消导出操作',
      })
    })
  }
//删除课程
const deleteCourse =()=>{
ElMessageBox.confirm('', '提示', {
    message: h('p', null, [
      h('h2', {style:'margin-bottom:10px;text-align:center'}, '你确定要删除吗?'),
      h('span', { style: 'color: teal' }, '注意:若有换过会员记录,则无法删除此课程'),
    ]),
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    center:true,
    type: 'warning',
  }).then((action) => {
    ElMessage({
      type: 'success',
      message: `删除完成`,
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}

//添加会员预约
//表单数据
const reserveForm = reactive({
   memberId:'',//会员id
   cardId:'',//会员卡
   reserveNums:1,//预约人数
   note:''//备注

})
const addDrawer= ref(false)
const members  = ref([])
const addMemberReserve = ()=>{
  addDrawer.value=true
}
const loading=ref(false)
const remoteMethod = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    //todo 调用接口查询课程 
   toSearchAll().then(res => {
      members.value = res.data.value
      console.log(members,' memberssss',res)
    })
  }, 2000);
}
//可用会员卡
const cards=ref([])
const selectById = () => {
    //todo 调用接口查询课程 
   toSearchByMemberId(reserveForm.memberId).then(res => {
      cards.value = res.data.value
      console.log(cards.value,' card===',res)
    })
}

//保存预约 
const saveReserve=()=>{
     ElMessageBox.confirm('', '提示',
    {
       message: h('p', null, [
        h('h2', { style: 'margin-bottom:10px;text-align:center' }, '你确定要预约该课程吗?'),
        h('span', { style: 'color: teal' }, '预约成功后需要完成学习哦'),
      ]),
      confirmButtonText: '添加',
      cancelButtonText: 'Cancel',
      type: 'warning',
      center:true
    }
  )
    .then(() => {
      //todo 调用后端接口


      ElMessage({
        type: 'success',
        message: '添加完成',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消',
      })
    })
}


</script >
<style lang="less" scoped>

.div-form{
    text-align: center; 
    width: 90%;
    margin-left: 20px;
}
.header-detail h4{
  color:#1ab394;
}
.header-detail .cg{
  color:#1ab394;
}

.header-detail .el-row{
   margin-top: 5px;
}
.mt4{
  margin-top: 5px;
}
.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}
.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-color-primary);
  stroke-linecap: round;
}
.w100{
  width: 100%;
}
</style>